<template>
    <div id="warnCenter">
        <div class="warnCenter_content">
            <h3 class="infoList_title">筛选区</h3>
            <ul class="infoList_filter">
                <li class="infoList_filter_item singular">
                    <span>时间范围：</span>
                    <el-radio
                    v-model="filterData.timeDate"
                    label="0"
                    >今天</el-radio>
                    <el-radio
                    v-model="filterData.timeDate"
                    label="1"
                    >24小时</el-radio>
                    <el-radio
                    v-model="filterData.timeDate"
                    label="2"
                    >3天</el-radio>
                    <el-radio
                    v-model="filterData.timeDate"
                    label="3"
                    >7天</el-radio>
                    <el-radio
                    class="defineTimeBtn"
                    v-model="filterData.timeDate"
                    label="4"
                    >
                    <template slot-scope>
                    自定义 
                    <i>></i>
                    </template>
                    </el-radio>
                    <el-date-picker
                    :class="dateRangeClass"
                    v-model="filterData.defineDate"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </li>
                <li class="infoList_filter_item">
                    <span>舆论情绪：</span>
                    <el-radio
                    v-model="filterData.pubMood"
                    label="0"
                    >全部</el-radio>
                    <el-radio
                    v-model="filterData.pubMood"
                    label="1"
                    >正面</el-radio>
                    <el-radio
                    v-model="filterData.pubMood"
                    label="2"
                    >中立</el-radio>
                    <el-radio
                    v-model="filterData.pubMood"
                    label="3"
                    >负面</el-radio>
                </li>
                <li class="infoList_filter_item" style="width: 100%">
                    <span>来源类型：</span>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="0"
                    >全部</el-radio>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="1"
                    >微博</el-radio>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="3"
                    >微信</el-radio>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="4"
                    >新闻</el-radio>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="5"
                    >电子报</el-radio>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="6"
                    >论坛</el-radio>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="7"
                    >短视频</el-radio>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="8"
                    >博客</el-radio>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="9"
                    >视频</el-radio>
                    <el-radio
                    v-model="filterData.typeResource"
                    label="10"
                    >其他</el-radio>
                </li>
                <li class="infoList_filter_btn">
                    <el-button type="primary">恢复默认</el-button>
                    <el-button type="danger">查询</el-button>
                </li>
            </ul>
            <h3
            class="infoList_title"
            style="margin:40px 0px 30px 0px"
            >监测结果</h3>
            <div class="tableBox">
            <span class="pageTotal">（在当前条件下筛选共123条）</span>
            <div class="pageSize">
                每页显示条数
                <el-select
                v-model="page.size"
                placeholder="请选择"
                >
                <el-option
                    v-for="item in page.pageSize"
                    :key="item"
                    :label="item"
                    :value="item"
                >
                </el-option>
                </el-select>
            </div>
            <el-input
            class="filterInput"
                placeholder="输入关键字在结果中搜索"
                prefix-icon="el-icon-search"
                v-model="page.filterText"
            >
            </el-input>
            <el-button class="filterBtn" type="primary">搜索</el-button>
            <div class="tableBtnGroup">
                <el-button size="mini" icon="daochu">导出</el-button>
                <el-button size="mini" icon="">全部导出</el-button>
                <el-button size="mini" icon="">加入素材</el-button>
                <el-button size="mini" icon="">全部加入素材</el-button>
                <el-button size="mini" icon="">收藏</el-button>
            </div>
            <el-button type="success" size="mini" class="visibilyBtn">隐藏摘要</el-button>
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                type="selection"
                width="35"
                >
                </el-table-column>
                <el-table-column label="全选本页">
                <template slot-scope="scope">
                    <div class="newsBox">
                    <h3 class="newsTitle">{{scope.row.title}}</h3>
                    <!-- <span
                        class="isRead"
                        :class="scope.row.readed=='0'? '':'noRead'"
                    >{{scope.row.readed=='0'? '已读':'未读'}}</span> -->
                    <div class="newsContent">{{scope.row.content}}</div>
                    <span class="newsTime">{{scope.row.publishTime}}</span>
                    <span class="newsResource">文章来源：{{scope.row.articleRessource}}</span>
                    <span class="newsTrigger">触发关键词：{{scope.row.triggerKey}}</span>
                    </div>
                    <div class="newsRelevant">
                    <span class="rele">相关舆情{{scope.row.total}}条</span>
                    <a href="#">查看原文</a><br>
                    <!-- <span class="newsBtn news_warn">预警</span> -->
                    <span class="newsBtn news_copy">复制文章</span>
                    <span class="newsBtn news_collect">收藏</span>
                    <span class="newsBtn news_read">已读</span>
                    <el-select
                        size="small"
                        width="100px"
                        v-model="scope.row.view"
                        placeholder="请选择"
                    >
                        <el-option
                        v-for="item in scope.row.viewOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    </div>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                background
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="page.pageSize"
                :page-size="page.size"
                layout="prev, pager, next"
                :total="page.total"
            >
            </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import '../../assets/css/warnCenter.css'
export default {
data(){
    return{
        filterData: {
            defineDate: '',
            timeDate: "0", // 时间范围
            pubMood: "0", // 舆论情绪
            sortRule: "0", // 排序规则
            similarArticle: "0", // 相似文章
            areaResourceType: "0", // 来源区域
            areaResource: "0",
            areaOption: [
            { value: "0", label: "上海" },
            { value: "1", label: "北京" },
            { value: "2", label: "广州" }
            ],
            typeResource: "0" // 来源类型
        },
        tableData: [
            {
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧合，发生在两如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧合，发生在两开了两会之后出现的，而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "0",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            },
            {
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "1",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            },{
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "1",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            },{
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "1",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            },{
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "1",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            },{
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "1",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            },{
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "1",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            },{
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "1",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            },{
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "1",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            },{
            title: "下周开始，襄阳这类交通工具将集中整治！",
            content:
                "如果没有记错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧错的话，当初武汉发生疫情，也正是武汉开了两会之后出现的，而这次北京又如此巧而这次北京又如此巧合，发生在两会开完后，究竟有什么关联和偶发呢 ​",
            publishTime: "2019-03-12 09:12:00",
            readed: "1",
            articleRessource: "搜狐网",
            triggerKey: "疫情/两会/武汉",
            total: "10",
            view: "0",
            viewOption: [
                { value: "0", label: "正面" },
                { value: "1", label: "中立" },
                { value: "2", label: "负面" }
            ]
            }
        ],
        multipleSelection: [],
        page: {
            filterText: "",
            currentPage: 1,
            pageSize: [10, 20, 30, 50, 100],
            size: 10,
            total: 100
        },
        dateRangeClass: 'dn'
    }
},
methods:{
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
},
computed:{
    timeDateSelect(){
      return this.filterData.timeDate
    }
  },
  watch:{
    timeDateSelect(val){
      if(val == '4'){
        this.dateRangeClass = ''
      }else{
        this.dateRangeClass = 'dn'
      }
    }
  }
}
</script>